import React, { useEffect } from "react";
import { Button, Tag } from "antd";
import { useAppDispatch, useAppSelector } from "../../app/hooks";
import { Loading } from "../../components";
import { asyncFetchJobList } from "../../features/job/jobSlice";
import style from "./style.module.css";
import { useNavigate } from "react-router-dom";
export const Job = () => {
  const list = useAppSelector((state) => state.job.list);
  const loading = useAppSelector((state) => state.job.loading);
  const error = useAppSelector((state) => state.job.error);
  const isLogin = useAppSelector((state) => state.user.isLogin);
  const dispatch = useAppDispatch();
  const navavite = useNavigate();
  useEffect(() => {
    dispatch(asyncFetchJobList());
  }, []);

  const toPublishjob = () => {
    if (isLogin) navavite("/publish/job");
    else navavite("/login");
  };

  if (loading) {
    return <Loading></Loading>;
  }

  return (
    <div>
      <Button type="primary" onClick={() => toPublishjob()}>
        发布招聘
      </Button>
      <div>
        {list.map((v) => {
          return (
            <div key={v.id} className={style["job-item"]}>
              <h3>
                {v.city}|{v.title}
              </h3>
              <div>
                {v.typeList.map((v, i) => {
                  return (
                    <Tag color="#2db7f5" key={i}>
                      {v.type}
                    </Tag>
                  );
                })}
              </div>
              <p className={style["p"]}>
                <img src={v.avator} alt="" className={style["img"]} />
                <span className={style["span"]}>{v.nickname}</span>
                <b>{v.date}</b>
              </p>
            </div>
          );
        })}
      </div>
    </div>
  );
};
